@import "./_default";
@import "./_minix";
// list.vue
.content {
    padding-top: 50px;
}
.c2c-list {
    position: relative;
    padding: 1rem;
    .c2c-item {
        margin-bottom: 1.5rem;
        box-shadow: 0 6px 10px rgba(204, 204, 204, 0.3);
        @include display(flex);
        padding: 1rem;
        .c2c-user-pic {
            @include size(5.5rem, 5.5rem);
            border-radius: 100%;
            overflow: hidden;
            img {
                @include size(100%, 100%);
            }
        }
        .c2c-desc {
            margin-left: 0.8rem;
            @include display(flex, space-around,column);
            @include flex(1);
            &-top {
                @include font(1.8rem);
                @include display(flex, space-between);
                h3 {
                    @include font($color: rgba(77, 79, 81, 1));
                }
                .price {
                    @include font($color: $defaultColor);
                    sup {
                        @include font(1rem);
                    }
                }
            }
            &-button {
                position: relative;
                .btn {
                    display: inline-block;
                    border-radius: 6rem;
                    padding: 0.2rem 0;
                    @include size($w: 6rem);
                    @include font(1rem, white, center);
                    &.btn-type1 {
                        background: $defaultColor;
                    }
                    &.btn-type2 {
                        background: rgba(250, 156, 42, 1);
                    }
                    &.btn-type3 {
                        background: rgba(255, 42, 122, 1);
                    }
                }
            }
        }
    }
}
// detail.vue
.c2c-wrap {
    padding: 1rem;
    .c2c-detail {
        position: relative;
        padding: 1rem;
        .c2c-user-img {
            @include size(5.5rem, 5.5rem);
            border-radius: 100%;
            overflow: hidden;
            margin: 0 auto;
            img {
                @include size(100%, 100%);
            }
        }
        .user-name {
            padding: 0.3rem;
            @include font(1.6rem, rgba(77, 79, 81, 1), center);
        }
        .price {
            padding: 0.3rem;
            @include font(1.8rem, $defaultColor, center);
        }
        &-button {
            position: relative;
            text-align: center;
            padding: 0.3rem;
            .btn {
                display: inline-block;
                border-radius: 6rem;
                padding: 0.2rem 0;
                margin-right: .5rem;
                @include size($w: 6rem);
                @include font(1rem, white, center);
                &.btn-type1 {
                    background: $defaultColor;
                }
                &.btn-type2 {
                    background: rgba(250, 156, 42, 1);
                }
                &.btn-type3 {
                    background: rgba(255, 42, 122, 1);
                }
            }
        }
    }
    .c2c-item-wrap {
        position: relative;
        .c2c-item {
            padding: 0.5rem;
            @include font(1.2rem);
            @include display(flex, space-between);
            span:nth-of-type(1) {
                @include font($color: rgba(77, 79, 81, 1));
            }
            span:nth-of-type(2) {
                @include font($color: rgba(0, 0, 0, 1));
            }
            span.active {
                color: $defaultColor;
            }
        }
        .c2c-item-desc {
            padding: 0.5rem;
            border-top: 1px solid rgba(232, 232, 232, 1);
            @include font($color: rgba(77, 79, 81, 1), $lineH:2rem);
        }
    }
}
.form-icon {
    display: inline-block;
    background-size: 2rem 2rem;
    margin: 0.5rem auto;
    @include size(2.5rem, 2.5rem);
    @include backgroundImg('form-icon.png', no-repeat, center center)
}
.advert-label {
    padding: 1rem;
    @include font(1.4rem, rgba(77, 79, 81, 1));
}
.advert-filter {
    padding: 0 1rem;
}
.flex-item {
    padding: 0.8rem 0.5rem;
    background: white;
    border: 1px solid $defaultColor;
    color: $defaultColor;
    &:not(:nth-of-type(2)) {
        margin-right: 1rem;
    }
    &.active {
        background: $defaultColor;
        color: white;
    }
}
.range-input-wraps {
    padding: 0.5rem;
    border: 1px solid rgba(1, 157, 250, 1);
    margin-left: 1rem;
    @include size(2.5rem, $maxW: 5rem);
    @include display(flex, $align: center);
    .range-input {
        border: none;
        background: none;
        @include size($maxW: 3rem);
        @include font($color: rgba(1, 157, 250, 1));
        @include flex(1);
    }
    span {
        color: rgba(71, 69, 70, 1);
    }
}
// advert.vue
.coins-filter {
    position: relative;
    padding: 1rem;
    z-index: 5;
    @include display(flex, space-between, center);
    h3 {
        @include font(1.6rem, rgba(84, 91, 113, 1), $fontW: 550);
    }
    .coins-select {
        border: 1px solid $borderColor;
        padding: 0.3rem 3rem 0.3rem 0.8rem;
        @include size($w: 9rem);
        position: relative;
        &::after {
            content: "";
            display: block;
            border-right: 1px solid $borderColor;
            border-top: 1px solid $borderColor;
            transform: rotate(135deg);
            @include position(absolute, 0.8rem, 1rem);
            @include size(8px, 8px);
        }
        .coins-select-item {
            &.buy {
                color: $c-warn;
                .icon {
                    @include backgroundImg('buy-in-icon.png', no-repeat, center center)
                }
            }
            &.sell {
                color: $c-success;
                .icon {
                    @include backgroundImg('sell-out-icon.png', no-repeat, center center);
                }
            }
            position: relative;
            @include display(flex, $align:center);
            .icon {
                @include size(2rem, 3rem);
                display: inline-block;
                background: $c-warn;
            }
        }
        .filter-select-position {
            @include position(absolute, 2.6rem, 0, $l: -1px);
            @include size($w: 9rem);
            padding: 0.5rem 0;
            border: 1px solid $borderColor;
            border-top: none;
            background: $c-white;
            .coins-select-item {
                padding: 0.3rem 0.8rem;
            }
        }
    }
}